<template>
	<div class="fileList" v-show="fileList.length">
		<h2>附件列表（{{ fileList.length }}）</h2>
		<el-table :data="fileList" stripe style="width: 100%" size="small">
			<el-table-column prop="oldName" label="附件名称">
				<template slot-scope="{ row }">
					<span class="el-icon-paperclip"></span>
					<span class="file-name sheng">{{ row.oldName }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="attrSize" label="附件大小" width="120">
				<template slot-scope="{ row }">
					<span class="file-name sheng">
						{{ row.attrSize | fileSizeFilter }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button class="file-look" type="text" icon="el-icon-view" size="mini" @click="handleLook(row)">查看</el-button>
						<el-button class="download" type="text" icon="el-icon-download" size="mini" @click="downloadCall(row.id, row.oldName)">下载</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<PreviewFile />
	</div>
</template>
<script>
import download from '@/mixins/download';
import Bus from '@/utils/bus.js';
export default {
	mixins: [download],
	components: {
		PreviewFile: () => import('@/components/resource/preview.vue')
	},
	data() {
		return {};
	},
	props: ['fileList'],
	mounted() {
		this.fileList.forEach((item) => {
			if (item.hasOwnProperty('sysAttachment')) {
				this.$set(item, 'oldName', item.sysAttachment.oldName);
				this.$set(item, 'attrSize', item.sysAttachment.attrSize);
			}
		});
	},
	methods: {
		handleLook(v) {
			Bus.$emit('showPreview', v, this.fileList);
		}
	}
};
</script>
<style scoped lang="scss">
.fileList {
	// padding: 0 10px;
	h2 {
		line-height: 2;
		color: #333;
		font-size: 16px;
		text-indent: 5px;
		border-bottom: 2px solid #ddd;
	}
	.file-look {
		margin-right: 10px;
	}
}
</style>
